---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

const baseUrl = import.meta.env.BASE_URL;

// 获取所有文章
const allPosts = await getCollection('blog');
const posts = allPosts.sort((a: CollectionEntry<'blog'>, b: CollectionEntry<'blog'>) => 
  b.data.date.valueOf() - a.data.date.valueOf()
);
---

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
    {posts.map((post: CollectionEntry<'blog'>) => (
      <a href={`${baseUrl}/posts/${post.slug}`} class="group h-full">
        <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 flex flex-col h-full">
          <div class="relative h-48 overflow-hidden">
            {post.data.thumbnail ? (
              <img 
                src={post.data.thumbnail} 
                alt={post.data.title}
                class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
            ) : (
              <div class="w-full h-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                <svg class="w-12 h-12 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </div>
            )}
          </div>
          <div class="p-6 flex-grow flex flex-col">
            <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
              <time datetime={post.data.date.toISOString()}>
                {new Date(post.data.date).toLocaleDateString('zh-CN', {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric'
                })}
              </time>
              {post.data.category && (
                <>
                  <span>·</span>
                  <span>{post.data.category}</span>
                </>
              )}
            </div>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-sky-400 mb-2">
              {post.data.title}
            </h3>
            {post.data.description && (
              <p class="text-gray-500 dark:text-gray-400 line-clamp-3 mb-4 flex-grow">
                {post.data.description}
              </p>
            )}
            {post.data.author && (
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-auto">
                作者：{post.data.author}
              </p>
            )}
          </div>
        </article>
      </a>
    ))}
  </div>
</div> 